<template>
    <div>
<Category :scene="scene"></Category>
<el-card shadow="always" style="margin:10px 0 ;" >
  <div v-show="scene==0">
    <el-button :disabled="!categortStore.c3id" type="primary" size="default" :icon="Plus" @click="addSpu(row)">添加SPU</el-button>
    <el-table border stripe style="margin:10px 0" :data="spuList.records" >
     <el-table-column label="序号" type="index" align="center" width="80px" ></el-table-column>
     <el-table-column label="SPU名称" prop="spuName" sortable show-overflow-tooltip resizable ></el-table-column>
     <el-table-column label="SPU描述" prop="description" show-overflow-tooltip resizable  ></el-table-column>
     <el-table-column label="操作" >
       <template #="{row,$index}">
         <el-button type="primary" size="small" :icon="Plus" title="添加SKU"></el-button>
         <el-button type="warning" size="small" :icon="Edit" title="修改SPU" @click="updateSpu(row)" ></el-button>
         <el-button type="info" size="small" :icon="InfoFilled" title="查看SKU"></el-button>
         <el-button type="primary" size="small" :icon="Delete" title="删除SPU"></el-button>
         
       </template>
     </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
     @size-change="sizeChange"
     @current-change="getSpuList"
     v-model:current-page="currentPage"
     :page-sizes="[3, 5, 7]"
     v-model:page-size="pageSize"
     layout="prev, pager, next, jumper,->,sizes,total"
     prev-text="上一页"
     next-text="下一页"
     :total="spuList.total"
      background
     :pager-count="7">
    </el-pagination>
  </div>
   <AddOrUpdateSpu v-show="scene==1" @changeScene="changeScene" ref="spuRef"></AddOrUpdateSpu>
   <AddSku v-show="scene==2"></AddSku>
   
   
</el-card>

    </div>
</template>

<script setup lang="ts">
import {ref,watch} from 'vue'
import Category from "@/components/category/Category.vue";
//引入请求SPU相关函数
import { reqSpuList } from "@/api/product/spu/spu";
//引入element-plus提供icon图标组件
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  UploadFilled,
  InfoFilled,
} from "@element-plus/icons-vue";
//引入仓库
import useCategoryStore from "../../../stores/category";
import AddOrUpdateSpu from "./addOrUpdateSpu.vue";
import AddSku from "./addSku.vue";
// 获取仓库
let categortStore = useCategoryStore();
// 定义一个变量,实现场景切换
let scene = ref<number>(0)
// 定义一页几条数据
let pageSize = ref<number>(3)
// 定义当前第几页
let currentPage = ref<number>(0)
// 定义响应式对象,存储服务器返回数据(spuList)
let spuList = ref({})
// 定义存储子组件实例的方法
let spuRef = ref()
// 监听仓库里三级id变化
watch(()=>categortStore.c3id,()=>{
    if(categortStore.c3id=='') return
    getSpuList()
})

// 封装函数方法,发请求获取spu下的数据
const getSpuList = async (page:number = 1)=>{
  currentPage.value = page
    let result = await reqSpuList(currentPage.value,pageSize.value,categortStore.c3id)
    // 存储spu下的数据
    spuList.value = result
}

// 每页几条数据发生变化的回调
const sizeChange = (limit:number)=>{
  // 存储数据
  pageSize.value = limit
  // 再次发请求获取数据
  getSpuList()
}

// 添加spu按钮的回调
const addSpu = (row)=>{
  // 切换场景
  scene.value =1
  spuRef.value.initAddSpu(categortStore.c1Id, categortStore.c2Id, row)
}

// 修改按钮的回调
const updateSpu = (row)=>{
    // 切换场景
    scene.value =1
      //获取子组件实例:调用子组件的方法
  spuRef.value.initHasSpuData(row);
}

// 自定义事件回调函数
const changeScene = ({ scenes, flag })=>{
   scene.value =scenes
  //  如果当前是添加
  if(flag == 'update'){
    // 留在当前页
    getSpuList(currentPage.value)
  }else{
    getSpuList()
  }
}

</script>

<style scoped>

</style>